<template>
  <div class="calendar-box">
    <div>
      <full-calendar
        :events="fcEvents"
        :config="config"
        default-view="agendaWeek"
        first-day="0"
        sunday="0"
        lang="zh"
        @changeMonth="changeMonth"
        @eventClick="eventClick"
        @dayClick="dayClick"
        @moreClick="moreClick"
      >
        <template slot="fc-header-right">
          <p>右侧插槽</p>
        </template>
        <!-- <template slot="fc-body-card">
          <div :style="{'left': cardLeft + 'px','top':cardTop + 'px'}" class="positionBox">
            <p>中间</p>
          </div>
        </template>-->
      </full-calendar>
    </div>
    <!-- 添加日程弹框 -->
    <el-dialog :visible.sync="addScheduleDialog" title="添加日程" width="30%">
      <el-form ref="scheduleForm" :model="scheduleForm" :rules="scheduleRules" label-width="100px">
        <el-form-item label="选择课程" prop="name">
          <el-input v-model="scheduleForm.name" placeholder="请输入姓名" style="width:80%;" />
        </el-form-item>
        <el-form-item label="选择教师" prop="status">
          <el-select v-model="scheduleForm.status" placeholder="请选择状态" style="width:80%;">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!-- 自定义开始时间 -->
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker v-model="scheduleForm.startTime" type="date" placeholder="请输入开始时间" />
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            v-model="scheduleForm.endTime"
            type="date"
            placeholder="请输入结束时间"
            style="width:80%;"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addSchedulConfirm">确 定</el-button>
        <el-button @click="addSchedulCancel">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 查看日程弹框 -->
    <el-dialog :visible.sync="viewScheduleDialog" title="查看日程" width="50%">
      <el-table :data="viewScheduleTableData" border style="width: 100%">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column prop="startTime" label="开始时间"></el-table-column>
        <el-table-column prop="endTime" label="结束时间"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="viewScheduleDialog=false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import fullCalendar from 'vue-fullcalendar'
export default {
  components: {
    fullCalendar
  },
  data() {
    return {
      config: {
        firstDay: 1,
        locale: 'zh-cn',
        defaultView: 'agendaWeek',

        height: 'auto',
        header: {
          left: 'title',
          center: '',
          right: 'prev,today,next',
        },
        /* agenda 模式 */
        allDaySlot: false,
        slotLabelFormat: 'H:mm', // axisFormat 'H(:mm)'
        slotLabelInterval: 1,
        slotDuration: '00:30:00',
        minTime: '8:00',
        maxTime: '20:00',
        editable: true,
        /* 设置按钮文字 */
        buttonText: {
          today: '今天',
        }
      },
      addScheduleDialog: false,
      viewScheduleDialog: false,
      // cardLeft: '',
      // cardTop: '',
      scheduleForm: {
        name: '',
        startTime: '',
        endTime: '',
        status: ''
      },
      scheduleRules: {
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        status: [{ required: true, message: '请输入状态', trigger: 'change' }],
        startTime: [{ type: 'date', required: true, message: '请输入开始时间', trigger: 'change' }],
        endTime: [{ type: 'date', required: true, message: '请输入结束时间', trigger: 'change' }]
      },
      statusOptions: [
        {
          value: 'statusA',
          label: '事假'
        },
        {
          value: 'statusB',
          label: '年假'
        },
        {
          value: 'statusC',
          label: '病假'
        }
      ],
      fcEvents: [
        {
          title: '赵云 事假',
          start: '2019-06-26',
          end: '2019-06-27',
          cssClass: 'statusA',
          DATA: {
            name: 'lishi',
            age: '13'
          }
        },
        {
          title: '孙策 事假',
          start: '2019-06-15',
          end: '2019-06-18',
          cssClass: 'statusA'
        },
        {
          title: '刘娜 年假',
          start: '2019-06-05',
          end: '2019-06-12',
          cssClass: 'statusB'
        },
        {
          title: '王思思 事假',
          start: '2019-06-27',
          end: '2019-06-28',
          cssClass: 'statusA'
        },
        {
          title: '李玟 年假',
          start: '2019-06-26',
          end: '2019-07-18',
          cssClass: 'statusB'
        },
        {
          title: '张磊 病假',
          start: '2019-06-02',
          end: '2019-06-05',
          cssClass: 'statusC'

        },
        {
          title: '刘华 年假',
          start: '2019-07-27',
          end: '2019-07-28',
          cssClass: 'statusB'
        }
      ],
      viewScheduleTableData: [
        {
          name: '1',
          status: '事假',
          startTime: 'mm-ss',
          endTime: 'mm-ss'
        }
      ],
      eventDay: ''
    }
  },
  methods: {
    hiddenCard() {
      console.log('ss')
    },
    changeMonth(start, end, current) {
      console.log('changeMonth', start, end, current)
    },
    eventClick(event, jsEvent, pos) {
      console.log('eventClick', event, jsEvent, pos)
      this.viewScheduleTableData[0].name = event.title.substring(0, event.title.indexOf(' '))
      this.viewScheduleTableData[0].status = event.title.substring(event.title.indexOf(' '))
      this.viewScheduleTableData[0].startTime = event.start
      this.viewScheduleTableData[0].endTime = event.end
      this.viewScheduleDialog = true
      // this.cardLeft = pos.left
      // this.cardTop = pos.top + 10
    },

    dayClick(day, jsEvent) {
      console.log('dayClick', day, jsEvent)
      const ftdate = new Date(day)
      const ftstartTime = ftdate.getFullYear() + '-' + this.dateLength((ftdate.getMonth() + 1)) + '-' + this.dateLength(ftdate.getDate())

      this.eventDay = ftstartTime
      this.addScheduleDialog = true
    },
    moreClick(day, events, jsEvent) {
      console.log('moreCLick', day, events, jsEvent)
    },
    dateLength(s) {
      return s < 10 ? '0' + s : s
    },
    addSchedulConfirm() {
      this.$refs.scheduleForm.validate((valid) => {
        if (valid) {
          debugger

          const Status = this.scheduleForm.status == 'statusA' ? '事假' : this.scheduleForm.status == 'statusB' ? '年假' : '病假'
          const lsdate = new Date(this.scheduleForm.endTime)
          const lsendTime = lsdate.getFullYear() + '-' + this.dateLength((lsdate.getMonth() + 1)) + '-' + this.dateLength(lsdate.getDate())
          this.fcEvents.push(
            {
              title: this.scheduleForm.name + ' ' + Status,
              cssClass: this.scheduleForm.status,
              // 点击某天默认开始日期就是某天
              start: this.eventDay,
              // 自定义开始时间
              // start: this.scheduleForm.endTime,
              end: lsendTime
            }
          )
          this.$refs.scheduleForm.resetFields()
          this.addScheduleDialog = false
        } else {
          return false
        }
      })
    },
    addSchedulCancel() {
      this.$refs.scheduleForm.resetFields()
      this.addScheduleDialog = false
    }
  }
}
</script>
<style lang='scss'>
.calendar-box {
  .events-day {
    cursor: pointer;
    flex: 1;
    min-height: 100px !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .statusA {
    background-color: rgb(16, 160, 243) !important;
  }
  .statusB {
    background-color: rgb(86, 252, 155) !important;
  }
  .statusC {
    background-color: rgb(255, 152, 56) !important;
  }
  .positionBox {
    position: absolute;
    z-index: 3;
    width: 200px;
    height: 100px;
    background-color: #fff;
    box-shadow: 0 0 10px #787887;
  }
  /deep/.comp-full-calendar {
    max-width: 80%;
    .comp-full-calendar {
      height: 40px;
      line-height: 40px;
    }
  }
}
</style>
